﻿:root {
    --meta-green: #19a15f;
    --meta-blue: #2580b4;
    --meta-yellow: #ffcd42;
    --meta-red: #ff5050;
    --meta-gray: #e9e9e9;
    --meta-header-bg-color: #000;
    --meta-footer-height: 30px;
    --meta-ribbon-tab-height: 130.5px;
    --bs-primary-rgb: 37, 128, 180;
    --uni-footer-height: 39px;
    --uni-sidebar-width: 120px;
    --uni-blue: var(--meta-blue);
    --bs-green: #19a15f;
    --bs-yellow: #ffcd42;
    --bs-red: #ff5050;
    --bs-gray: #e9e9e9;
    --uni-fontsize-header: 1.3rem;
    --uni-fontsize-sidebar: 1.1rem;
    --uni-fontsize-content-primary: 1.6rem;
    --uni-fontsize-content-second: 1.3rem;
    --uni-fontsize-btn: 1rem;
    --uni-border-radius: 4px;
    --uni-btn-height: 35px;
    --uni-toolbar-height: 54px;
    --bb-disabled-bg: #f5f5f5;
    --bb-border-hover-color: var(--uni-blue);
    --bs-primary: var(--uni-blue);
    --bs-primary-rgb: 37, 128, 180;
    --meta-drawer-header-height: 73.5px;
    --meta-drawer-sider-width: 80px;
    --meta-infobar-bottom: 30px;
    --border-width: 2px solid var(--meta-blue);
}

* {
    margin: 0;
    padding: 0;
    font-size: 16px;
}

html, body, main {
    height: 100%;
}

#app {
    overflow: hidden;
    height: 100%
}

app {
    height: 100%;
}

.loading-progress {
    height: 100%;
    position: relative
}

    .loading-progress svg {
        position: absolute;
        height: 300px;
        width: 300px
    }

.btn-primary {
    --bs-btn-bg: var(--meta-blue);
    --bs-btn-border-color: #1861ac;
    --bs-btn-hover-bg: #2c749d;
    --bs-btn-hover-border-color: #226b95;
    --bs-btn-active-bg: #1d5c80;
    --bs-btn-disabled-bg: #0d82c6;
    --bs-btn-disabled-border-color: #085bb0;
}

.modal .btn-close {
    opacity: 1;
    font-size: 1.5rem;
    --bs-btn-close-bg: url("");
}

.modal-header {
    background-color: var(--meta-blue);
    color: white
}

    .modal-header .modal-header-buttons {
        color: white
    }

.settings .modal-body {
    height: calc(100vh - 300px);
}

    .settings .modal-body .tabs1 .tabs-body {
        position: relative
    }

    .settings .modal-body .tabs1 .form-footer {
        position: absolute;
        right: 13px;
        bottom: 16px;
        width: 100%;
    }

    .settings .modal-body .tabs.tabs-vertical > .tabs-header .tabs-nav {
        height: 100%;
    }

.new-template .modal-body .svg-editor {
    height: 850px
}

    .new-template .modal-body .svg-editor .svg_editor #tools_bottom {
        overflow: hidden
    }

.square img {
    width: 10px !important;
    height: 17px !important;
}

.ribbon-tab {
    height: 100%;
    --bb-ribbon-menu-bg: var(--meta-blue);
    --bb-ribbon-menu-color: #fff;
    --bb-ribbon-menu-hover-color: #000;
    --bb-ribbon-menu-body-height: 79px;
    --bb-ribbon-menu-body-padding: 0.7rem;
    --bb-ribbon-body-padding: 0;
    --bb-ribbon-menu-hover-bg: #52b5ee;
    --bb-ribbon-button-padding: 1px 8px;
    --bb-ribbon-menu-active-bg: #156796;
}

    .ribbon-tab .ribbon-header .tabs-nav-wrap {
        display: none
    }

    .ribbon-tab .ribbon-body {
        height: calc(100% - 165px);
    }

    .ribbon-tab .ribbon-header .tabs {
        --bb-tabs-item-active-color: #fff;
        --bb-tabs-item-hover-color: #fff;
    }

    .ribbon-tab .tabs-nav-scroll {
        display: none
    }

    .ribbon-tab .ribbon-header .tabs .tabs-nav-wrap:after {
        content: none;
    }

    .ribbon-tab .ribbon-header .tabs .tabs-active-bar {
        display: none;
    }

    .ribbon-tab .ribbon-header .tabs .tabs-nav {
        --bs-body-color: var(--bb-ribbon-menu-color);
    }

    .ribbon-tab .ribbon-header .tabs .tabs-item {
        transition: background-color .3s ease-in-out;
    }

        .ribbon-tab .ribbon-header .tabs .tabs-item:is(.active, :hover) {
            background-color: var(--bb-ribbon-menu-active-bg);
        }

    .ribbon-tab .ribbon-header .tabs .tabs-item-text {
        padding: var(--bb-ribbon-button-padding);
        border-radius: var(--bs-border-radius);
        transition: background-color .3s ease-in-out;
    }

    .ribbon-tab .ribbon-header .tabs-border-card > .tabs-header .tabs-item.active {
        color: #000;
    }

    .ribbon-tab .ribbon-button {
        margin-right: 1rem;
        color: var(--bb-ribbon-menu-color);
    }

    .ribbon-tab .ribbon-arrow {
        color: var(--bb-ribbon-menu-color);
    }

    .ribbon-tab .ribbon-button:hover {
        background-color: var(--bb-ribbon-menu-hover-bg);
    }

.ribbon-buttons .dropdown-toggle {
    padding: var(--bb-ribbon-button-padding);
}

    .ribbon-buttons .dropdown-toggle > i {
        margin-right: 0;
    }

.is-expand .device-body {
    --meta-ribbon-tab-height: 130.5px !important;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.temp-text {
    font-size: 77px
}

.template-pre .modal-body {
    text-align: center
}
